<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>v-solt</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>
</head>
<body>
<div id="app">
   <!-- <p>书籍列表</p>
    <ul>
        <li>java</li>
        <li>python</li>
        <li>c++</li>
    </ul>-->

    <todo>
        <todo-title slot="todo-title":title="title"></todo-title>  <!--使用插槽slot-->
        <todo-items slot="todo-items" v-for="item in items" :item="item"></todo-items> <!--使用插槽slot-->
    </todo>
</div>

<script>

    //solt插槽
    Vue.component("todo",{
     /* 绑定组件todo-title,todo-items*/
        template:
            '<div>\
                <slot name="todo-title"></slot>\
                <ul>\
                <slot name="todo-items"></slot>\
                </ul>\
            </div>'
    })

    Vue.component("todo-title",{
        props:["title"],
        template:'<div>{{title}}</div>'
    });
    Vue.component("todo-items",{
        props:["item"],
        template: '<li>{{item}}</li>'

    });

    var vue = new Vue({
        el:"#app",
        data:{
            title:"学习好前端vue!",
            items:["学java","学前端","学vue"],
        },

    })

</script>
</body>
</html>